<template>
  <div id="detail">
        <myheader></myheader>
        <div class="dashboard">
            <div style="text-align: center;">
                <img :src="activeItem.image" alt="" width="400px">
                <br>
                {{activeItem.name}}
                <br>
                {{activeItem.sales}}
                <br>
                {{activeItem.cost}}
                <br>
                {{activeItem.color}}
            </div>
        </div>

        <div class="content">
        </div>



    </div>
</template>

<script>
import {product} from '../../moke/product_data'
export default {
    name:'detail',
    data(){
        return {
            activeId:this.$route.params.id,
            product_data: product
        }
    },
    computed:{
        activeItem(){
            return this.product_data[this.activeId-1]
        }
    },
    mounted(){
    }
}
</script>

<style scoped>
    
</style>